import React, { Component, Suspense, Fragment } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import ColorSelect from './colorSelect'
import { ChromePicker } from 'react-color';
import { connect } from 'dva';
import moment from 'moment';
import dataTime from '../../../utils/dataTime';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Button,
  Input,
  Upload,
  message,
  Radio,
  Spin,
  notification,
  Switch,
} from 'antd';
import Editor from '@/utils/Editor';
import styles from './index.less';
import imgURL from '../../../assets/accessSettings/icon-a.png'; // http://www.chatbot.cn/qizhi-client-img/在线客服.png1
import LogoimgURL from '../../../assets/accessSettings/icon-头像.png';
import khmrimgURL from '../../../assets/accessSettings/icon-机器人.png';
import mrckSizea from '../../../assets/accessSettings/默认大窗口.png';
import mrckSizeb from '../../../assets/accessSettings/默认小窗口.png';
import imgycd from '../../../assets/accessSettings/浮动-a.png';
import imgycz from '../../../assets/accessSettings/浮动-c.png';
import imgyddycd from '../../../assets/accessSettings/h5-a.png';
import imgyddycx from '../../../assets/accessSettings/h5-c.png';
import imgyddycz from '../../../assets/accessSettings/he-b.png';

const mrckzxkf = 'http://www.chatbot.cn/qizhi-client-img/在线客服.png';
const mrckjqr = 'http://www.chatbot.cn/qizhi-client-img/robot.png';
const mrckzxkfd = 'http://www.chatbot.cn/qizhi-client-img/在线客服-大.png';
const mrckzxkfs = 'http://www.chatbot.cn/qizhi-client-img/在线客服-竖.png';
const mrckkfzx = 'http://www.chatbot.cn/qizhi-client-img/咨询在线客服.png';
import ljx from '../../../assets/icons/垃圾箱.png';

import Shape from '@/assets/account/accessSettings/Shape.png';
import fuzhi from '@/assets/account/accessSettings/fuzhi.png';
import xy from '@/assets/account/robotSetup/xy.png';
import sy from '@/assets/account/robotSetup/sy.png';
import laji from '@/assets/account/robotSetup/laji.png';
import xztime from '@/assets/account/robotSetup/rmtime.png';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

import imga from '@/assets/account/robotSetup/imga.png';
import imgb from '@/assets/account/robotSetup/imgb.png';
import gou from '@/assets/account/robotSetup/gou.png';
import xa from '@/assets/account/robotSetup/xa.png';
import xzwj from '@/assets/account/robotSetup/xzwj.png';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_fqf69hupewt.js', // 在 iconfont.cn 上生成
});
const { TextArea } = Input;
class SiteAccess extends Component {
  constructor() {
    super();
    this.state = {
      // 参数
      logoa: robotDeployUrl + '/robotConfigImg/robotLogo.png',
      logob: robotDeployUrl + '/robotConfigImg/headPortrait.png',
      logoc: robotDeployUrl + '/robotConfigImg/robotLogo.png',
      entranceWebStyle: '', // 入口图标样式 电脑端
      entranceH5Style: '', // 入口图标样式 移动端
      ckbt: '',
      ckys: '',
      jqrkfName: '',
      isSimilar: '2',
      // 参数结结束
      loading: false,
      imageUrld: null,
      imageUrle: null,
      index: 100,
      indextwo: 100,
      color: '#11cbff ',
      colortwo: '#11cbff ',
      displayColorPicker: false,
      displayColorPickertwo: false,
      loading: false,
      loadingA: false,
      loadingB: false,
      valueA: '1',
      valueB: '1',
      valueC: '1',
      ckdxSize: '1',
      mrckdxweb: '1',
      mrckdxydd: '1',
      bottomStyle: 1,
      commonProblemList: [{ name: '', item: '' }],
      pdxs: true,
      content: '',
      valueMax: true,
      valueMaxa: true,
      valueMaxb: true,
      valueMaxc: true,
      // zxkfList: [
      //   { name: mrckzxkf, icon: '' },
      //   { name: mrckjqr, icon: '' },
      //   { name: mrckzxkfd, icon: '' },
      //   { name: mrckzxkfs, icon: '' },
      // ],
      zxkfList: [
        { name: imga, icon: '' },
        { name: imgb, icon: '' },
        // { name: mrckzxkfd, icon: '' },
        // { name: mrckzxkfs, icon: '' },
      ],
      // ydkfList: [
      //   { name: mrckzxkf, icon: '' },
      //   { name: mrckjqr, icon: '' },
      //   { name: mrckzxkfd, icon: '' },
      //   { name: mrckzxkfs, icon: '' },
      //   { name: mrckkfzx, icon: '' },
      // ],
      ydkfList: [
        { name: imga, icon: '' },
        { name: imgb, icon: '' },
        // { name: mrckzxkfd, icon: '' },
        // { name: mrckzxkfs, icon: '' },
        // { name: mrckkfzx, icon: '' },
      ],
    };
  }

  componentDidMount() {
    // console.log(window.location.href)
    this.suax();
    let sysTime = dataTime.formatDate(new Date().getTime()); // 初始时间
    this.setState({
      overTime: sysTime.replace(/\//g, '-'),
    });
  }

  suax = () => {
    this.setState({ loading: true });
    const { dispatch, currentUser } = this.props;
    console.log(currentUser.robotId, '机器人id', currentUser);
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'accessSettings/fetchd',
        payload: {},
        callback: res => {
          console.log('获取网站接入信息', res);
          // 判断

          const a = this.state.zxkfList;
          const b = this.state.ydkfList; // entranceH5Style
          const lista = [];
          const listb = [];
          a.map((item, index) => {
            // item.icon = ''
            lista.push(item.name);
            if (res.entranceWebImg === item.name) {
              console.log(index);
              a[index].icon = '1';
              this.setState(() => ({
                zxkfList: a,
                imageUrld: null,
                entranceWebStyle: a[index].name,
              }));
              if (index === 0) {
                this.setState(() => ({ index: 100 }));
              } else {
                this.setState(() => ({ index }));
              }
            }
          });

          // 处理自定义图片
          let resulta = a.every(val => {
            return val.name !== res.entranceWebImg;
          });
          console.log(resulta);
          if (resulta) {
            this.setState({ imageUrld: res.entranceWebImg, index: null,entranceWebStyle:res.entranceWebImg });
          } else {
            if (!lista.includes(res.entranceWebImg)) {
              this.setState({ index: null, imageUrld: res.entranceWebImg });
              this.djMapImg('0');
            }
          }

          //  console.log()

          b.map((item, index) => {
            // item.icon = ''
            listb.push(item.name);
            if (res.entranceH5Img === item.name) {
              console.log(index);
              b[index].icon = '1';
              this.setState(() => ({
                ydkfList: b,
                imageUrle: null,
                entranceH5Style: b[index].name,
              }));
              if (index === 0) {
                this.setState(() => ({ indextwo: 100 }));
              } else {
                this.setState(() => ({ indextwo: index }));
              }
            }
          });

          // 处理自定义图片
          let resultb = b.every(val => {
            return val.name !== res.entranceH5Img;
          });
          console.log(resultb);
          if (resultb) {
            this.setState({ imageUrle: res.entranceH5Img, indextwo: null,entranceH5Style:res.entranceH5Img });
          } else {
            if (!listb.includes(res.entranceH5Img)) {
              this.setState({ indextwo: null, imageUrle: res.entranceH5Img });
              this.yddjMapImg('0');
            }
          }
          // this.setState({ indextwo: null, imageUrle: null })
          // if (!listb.includes(res.entranceH5Img)) {
          //   this.setState({ indextwo: null, imageUrle: res.entranceH5Img });
          //   this.yddjMapImg('0');
          // }

          let rmwtpb = [];
          if (res.hotQa === null) {
            res.hotQa = [];
          }
          res.hotQa.map((item, index) => {
            let t = { name: '', item: '' };
            t.item = item;
            t.name = 'tcx';
            rmwtpb.push(t);
          });

          if (res.winLogo !== null) {
            this.setState({ logoa: res.winLogo });
          }

          if (res.userHeadImg !== null) {
            this.setState({ logob: res.userHeadImg });
          }

          if (res.robotHeadImg !== null) {
            this.setState({ logoc: res.robotHeadImg });
          }

          if (res.entranceFlag == 2) {
            this.setState({ valueMax: true });
          }

          if (res.entranceFlag == 1) {
            this.setState({ valueMax: false });
          }

          if (res.solveFlag == 2) {
            this.setState({ valueMaxa: true });
          }

          if (res.solveFlag == 1) {
            this.setState({ valueMaxa: false });
          }

          if (res.showFlag == 2) {
            this.setState({ valueMaxb: true });
          }

          if (res.showFlag == 1) {
            this.setState({ valueMaxb: false });
          }

          if (!res.isSimilar) {
            this.setState({ valueMaxc: true });
          }

          if (res.isSimilar) {
            this.setState({ valueMaxc: false });
          }

          this.setState({
            commonProblemList: rmwtpb,
            ckbt: res.winTitle,
            color: res.winColor ? res.winColor : '#11cbff',
            valueA: res.solveFlag ? String(res.solveFlag) : '1',
            valueB: res.showFlag ? String(res.showFlag) : '1',
            jqrkfName: res.robotName ? res.robotName : '',
            ckdxSize: res.winSize ? String(res.winSize) : '1',
            content: res.sidebarMsg ? res.sidebarMsg : '提示内容',
            valueC: res.entranceFlag ? String(res.entranceFlag) : '1',
            mrckdxweb: res.entranceWebSeat ? String(res.entranceWebSeat) : '1',
            mrckdxydd: res.entranceH5Seat ? String(res.entranceH5Seat) : '1',
            isSimilar: res.isSimilar ? '1' : '2',
            // valueMaxc:res.isSimilar ? true : false,
            colortwo: res.iconBottomColor ? res.iconBottomColor : '#11cbff',
            loading: false,
            bottomStyle: res.entranceH5Seat,
          });
        },
      });
    });
  };

  handleChangeComplete = color => {
    console.log(color.hex);
    this.setState({ color: color.hex });
  };

  // ----------- 窗口颜色-----------------------
  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false });
  };

  // ----------- 入口图标位置底部窗口颜色-----------------------
  handleClicktwo = () => {
    this.setState({ displayColorPickertwo: !this.state.displayColorPickertwo });
  };

  handleClosetwo = () => {
    this.setState({ displayColorPickertwo: false });
  };
  handleChangeCompletetwo = color => {
    console.log(color.hex);
    this.setState({ colortwo: color.hex });
  };

  // ----------------客户默认头像----------
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  beforeUpload = file => {
    console.log(file);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  };

  handleChangeA = info => {
    console.log(info);
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrla =>
        this.setState({
          imageUrla,
          loading: false,
          logob: info.file.response.url,
        })
      );
    }
  };

  // ------------- 解决状态--------------------

  // ------------- 机器人默认头像--------------
  handleChangeB = info => {
    console.log(info);
    if (info.file.status === 'uploading') {
      this.setState({ loadingA: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrlb =>
        this.setState({
          imageUrlb,
          loadingA: false,
          logoc: info.file.response.url,
        })
      );
    }
  };

  // -----------------窗口logo----------------
  handleChangeC = info => {
    console.log(info);
    if (info.file.status === 'uploading') {
      this.setState({ loadingB: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.

      this.getBase64(info.file.originFileObj, imageUrlc =>
        this.setState(
          {
            imageUrlc,
            loadingB: false,
            logoa: info.file.response.url,
          },
          () => {
            console.log('窗口logo地址', this.state.logoa);
          }
        )
      );
    }
  };

  //  -------入口图标样式 电脑web端------------
  handleChangeD = info => {
    console.log(info);

    if (info.file.status === 'uploading') {
      this.setState({ loadingC: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrld =>
        this.setState({
          imageUrld,
          loadingB: false,
          entranceWebStyle: info.file.response.url,
        })
      );
      // let img = info.file.response.url
      // console.log(img)
      // let a = { name:img, icon: '' }
      // let b = this.state.zxkfList
      // b.push(a)
    }
  };

  //  ----------入口图标样式 移动端H5----------------
  handleChangeE = info => {
    console.log(info);

    if (info.file.status === 'uploading') {
      this.setState({ loadingD: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrle =>
        this.setState({
          imageUrle,
          loadingD: false,
          entranceH5Style: info.file.response.url,
        })
      );
    }
  };

  //  --------------------热门问题-----------------
  handleAdditem = () => {
    this.setState(
      a => ({
        commonProblemList: [...a.commonProblemList, { name: '' }],
      }),
      () => {
        let a = this.state.commonProblemList;
        console.log(a);
        for (var i = 0; i < a.length - 1; i++) {
          console.log(a[i]);
          a[i].name = 'tcx';
        }
        this.setState({ commonProblemList: a }, () => {
          const { input } = this.inputRef; // 如果是textArea的话，const { textAreaRef } = this.inputRef;
          input.focus();
          input.setSelectionRange(0, input.value.length);
        });
        // }
      }
    );
  };

  handleSubmitAs = e => {
    console.log(e);
    let a = this.state.commonProblemList;
    a.splice(e, 1);
    console.log(a);
    this.setState({ commonProblemList: a });
  };

  zjrmwt = (e, b) => {
    console.log(e.target.value, b);
    let a = this.state.commonProblemList;
    a[b].item = e.target.value;
    this.setState({ commonProblemList: a });
  };

  // -------------入口图标样式------------
  rktbonChange = e => {
    // console.log('radio checked', e.target.value);
    // this.setState({
    //   valueC: e.target.value,
    // });
    console.log(`switch to ${e}`);
    if (e === true) {
      this.setState({
        valueC: '2',
        valueMax: e,
      });
    }
    if (e === false) {
      this.setState({
        valueC: '1',
        valueMax: e,
      });
    }
  };

  rktbonChangea = e => {
    console.log(`switch to ${e}`);
    if (e === true) {
      this.setState({
        valueA: '2',
        valueMaxa: e,
      });
    }
    if (e === false) {
      this.setState({
        valueA: '1',
        valueMaxa: e,
      });
    }
  };

  rktbonChangeb = e => {
    console.log(`switch to ${e}`);
    if (e === true) {
      this.setState({
        valueB: '2',
        valueMaxb: e,
      });
    }
    if (e === false) {
      this.setState({
        valueB: '1',
        valueMaxb: e,
      });
    }
  };

  rktbonChangec = e => {
    console.log(`switch to ${e}`);
    if (e === true) {
      this.setState({
        isSimilar: '2',
        valueMaxc: e,
      });
    }
    if (e === false) {
      this.setState({
        isSimilar: '1',
        valueMaxc: e,
      });
    }
  };

  djMapImg = index => {
    console.log(index);
    const a = this.state.zxkfList;
    this.setState({ entranceWebStyle: a[index].name });
    a.map((item, index) => {
      item.icon = '';
    });
    a[index].icon = '1';
    this.setState(() => ({ zxkfList: a, imageUrld: null }));
    console.log(a);
    if (index === 0) {
      this.setState(() => ({ index: 100 }));
    } else {
      this.setState(() => ({ index }));
    }
  };

  // 上移
  handleSubmitAyd = index => {
    console.log(index);
    let arr = this.state.commonProblemList;
    this.upData(arr, index);
  };

  upData = (arr, index) => {
    var swapItems = function(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    };
    var newArr = [];
    if (arr.length > 1 && index !== 0) {
      newArr = swapItems(arr, index, index - 1);
    }
    console.log('数据', newArr);
    if (newArr.length === 0) {
      message.info(`再上移就没了`);
    } else {
      this.setState({ commonProblemList: newArr });
    }
  };

  // ---------- 移动端图标样式-------------
  yddjMapImg = index => {
    console.log(index);
    const a = this.state.ydkfList;
    this.setState({ entranceH5Style: a[index].name });
    a.map((item, index) => {
      item.icon = '';
    });
    a[index].icon = '1';
    this.setState(() => ({ ydkfList: a, imageUrle: null }));
    if (index === 0) {
      this.setState(() => ({ indextwo: 100 }));
    } else {
      this.setState(() => ({ indextwo: index }));
    }
  };

  qkimg = () => {
    console.log('12345');
    this.setState({ index: null, imageUrld: null });
  };

  qkimgt = () => {
    console.log('12345');
    this.setState({ indextwo: null, imageUrle: null });
  };

  baocun = () => {
    let listrmtime = this.state.commonProblemList;
    let listrmtimes = [];
    listrmtime.map((item, index) => {
      if (item.item) {
        listrmtimes.push(item.item);
      }
    });
    console.log(listrmtimes);

    console.log(this.ueditor.getUeditorContent());
    let feb = this.ueditor.getUeditorContent();
    const {
      color,
      valueA,
      valueB,
      valueC,
      ckdxSize,
      mrckdxweb,
      mrckdxydd,
      entranceH5Style,
      entranceWebStyle,
      overTime,
    } = this.state;
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    if (userInfo.jqrkfName) {
      this.props.form.validateFields((err, values) => {
        // 校验方法
        console.log(userInfo);
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'accessSettings/fetche',
            payload: {
              winTitle: userInfo.cktitle,
              winColor: color,
              winLogo: this.state.logoa,
              solveFlag: Number(userInfo.ckSolveState),
              showFlag: Number(userInfo.ckShow),
              isSimilar: Number(userInfo.isSimilar) === 1 ? true : false,
              userHeadImg: this.state.logob,
              robotHeadImg: this.state.logoc,
              robotName: userInfo.jqrkfName,
              winSize: Number(userInfo.mrckSize),
              sidebarMsg: feb,
              entranceFlag: valueC,
              entranceWebImg: this.state.entranceWebStyle,
              entranceH5Img: this.state.entranceH5Style,
              entranceWebSeat: userInfo.mrckdxweb ? userInfo.mrckdxweb : '1',
              entranceH5Seat: userInfo.mrckdxydd ? userInfo.mrckdxydd : '1',
              hotQa: listrmtimes.filter(d => d),
              iconBottomColor: this.state.colortwo,
            },
            callback: res => {
              console.log('列表数据', res);
              if (res.code === 0) {
                message.success(`${res.msg}`);
                this.suax();
              }
            },
          });
        });
      });
    } else {
      notification.open({
        message: '提交失败',
        description: '除窗口标题、热门问题、侧边栏信息展示 其它为必填项！',
      });
    }
  };

  copy = () => {
    let text = document.getElementById('biao1');
    if (document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      let selection = window.getSelection();
      let range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }
    document.execCommand('Copy');
    message.success('复制成功！');
  };

  bottomColor = e => {
    console.log(e.target.value);
    this.setState({ bottomStyle: Number(e.target.value) });
  };

  render() {
    const popover = {
      position: 'absolute',
      zIndex: '2',
    };
    const gbcolor = {
      background: this.state.color,
    };
    const gbcolortwo = {
      background: this.state.colortwo,
    };
    const cover = {
      position: 'fixed',
      top: '0px',
      right: '0px',
      bottom: '0px',
      left: '0px',
    };
    const body = '</body>';
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 5,
        lg: 5,
      },
      wrapperCol: {
        sm: 24,
        md: 19,
        lg: 19,
      },
    };
    const FormItemLayonttwo = {
      labelCol: {
        sm: 24,
        md: 5,
        lg: 5,
      },
      wrapperCol: {
        sm: 24,
        md: 20,
        lg: 20,
      },
    };
    // logo头像
    const uploadButtonb = <img style={{ width: 51, height: 51 }} src={this.state.logoa} />;
    // 客服头像
    const uploadButton = <img style={{ width: 51, height: 51 }} src={this.state.logob} />;
    // 机器人头像
    const uploadButtona = <img style={{ width: 51, height: 51 }} src={this.state.logoc} />;
    const imageUrla = this.state.imageUrla;
    const imageUrlb = this.state.imageUrlb;
    const imageUrlc = this.state.imageUrlc;
    const imageUrld = this.state.imageUrld;
    const imageUrle = this.state.imageUrle;
    return (
      <div>
        <Spin spinning={this.state.loading}>
          <img src={Shape} />
          {/* <span className={styles.titlep}><span>网站接入</span></span> */}
          {/* <div className={styles.webAccess}>
            <img src={imgURL} />
            <span>网站接入说明</span>
          </div> */}
          <span style={{ fontSize: 24, color: '#4a90e2', marginLeft: 30 }}>网站接入说明</span>
          <div style={{ height: 30 }} />
          <span className={styles.titlep} style={{ marginLeft: 112 }}>
            网站接入代码
          </span>
          <div className={styles.borzdy} />
          <p style={{ margin: '37px 0px 37px 112px', color: '#9B9B9B' }}>
            请将以下代码添加到你网站的HTML源代码中，放在标签{body}之前，即可实现接入
          </p>
          <div className={styles.textTitleDeV}>
            <div className={styles.textTitle} id="biao1">{`<script src="${
              window.location.protocol
            }//${window.location.host}" data-robotId="${
              this.props.currentUser.robotId
            }" id="qizhiChatScript"></script>`}</div>
          </div>
          <img onClick={this.copy} style={{ margin: '37px 0px 17px 106px' }} src={fuzhi} />
          {/* <Button onClick={this.copy} size='small' className={styles.djBu}>复制</Button> */}
          <div style={{ height: 30 }} />
          <span style={{ marginLeft: 112 }} className={styles.titlep}>
            <span>网站接入设置</span>
          </span>
          <div className={styles.borzdy} />
          <div style={{ height: 30 }} />
          <div className={styles.flexm}>
            {/* <div style={{height:400,width:112}}></div> */}
            {/* <div></div> */}
            <Row gutter={60} style={{ marginLeft: 112 }} className={styles.webSet}>
              <Col xl={13} lg={24}>
                <div>
                  <Form className="zdyfroma" layout="horizontal">
                    <FormItem label="窗口标题">
                      {getFieldDecorator('cktitle', {
                        initialValue: this.state.ckbt,
                      })(<Input />)}
                    </FormItem>
                    <FormItem label="窗口颜色" {...FormItemLayont}>
                      {getFieldDecorator('ckcolor', {
                        initialValue: this.state.color,
                      })(
                        <div className={styles.flexColor}>
                          <div
                            style={gbcolor}
                            className={styles.colorzj}
                            onClick={this.handleClick}
                          />
                          <span>{this.state.color}</span>
                          {this.state.displayColorPicker ? (
                            <div style={popover}>
                              <div style={cover} onClick={this.handleClose} />
                              <ChromePicker
                                color={this.state.color}
                                onChangeComplete={this.handleChangeComplete}
                              />
                            </div>
                          ) : null}
                        </div>
                      )}
                    </FormItem>
                    <FormItem className="Uploadlgq" label="窗口Logo" {...FormItemLayont}>
                      <Upload
                        name="logoavatar"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/res/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={this.handleChangeC}
                      >
                        <div className={styles.xzwj}>
                          {imageUrlc ? (
                            <img
                              style={{ width: 51, height: 51 }}
                              src={imageUrlc}
                              alt="logoavatar"
                            />
                          ) : (
                            uploadButtonb
                          )}
                          <img src={xzwj} alt="" />
                          {/* <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button> */}
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50
                      </p>
                    </FormItem>
                    <FormItem className="zdyswer" label="解决状态" {...FormItemLayont}>
                      {getFieldDecorator('ckSolveState', {
                        initialValue: this.state.valueA,
                      })(
                        <div>
                          <Switch
                            className={styles.zdySwitch}
                            defaultChecked
                            onChange={this.rktbonChangea}
                            checked={this.state.valueMaxa}
                          />
                          <span
                            style={{
                              marginLeft: 10,
                              color: '#1D1D1D',
                              position: 'relative',
                              top: 2,
                            }}
                          >
                            {this.state.valueMaxa ? '关闭' : '开启'}
                          </span>
                        </div>
                        // <RadioGroup>
                        //   <Radio value="1">开启</Radio>
                        //   <Radio value="2">关闭</Radio>
                        // </RadioGroup>
                      )}
                    </FormItem>
                    {/* <div style={{ marginBottom: 24, marginTop: 6 }}>
                      <span
                        style={{ marginRight: 10, color: '#c8c8c8', fontFamily: 'FZLTHJW--GB1' }}
                      >
                        解决状态
                      </span>
                      {getFieldDecorator('ckSolveState', {
                        initialValue: this.state.valueA,
                      })(
                        <RadioGroup>
                          <Radio value="1">开启</Radio>
                          <Radio value="2">关闭</Radio>
                        </RadioGroup>
                      )}
                    </div> */}
                    <FormItem label="显示状态" {...FormItemLayont}>
                      {getFieldDecorator('ckShow', {
                        initialValue: this.state.valueB,
                      })(
                        // <div>
                        //   <Switch
                        //     className={styles.zdySwitch}
                        //     defaultChecked
                        //     onChange={this.rktbonChangeb}
                        //     checked={this.state.valueMaxb}
                        //   />
                        //   <span
                        //     style={{
                        //       marginLeft: 10,
                        //       color: '#1D1D1D',
                        //       position: 'relative',
                        //       top: 2,
                        //     }}
                        //   >
                        //     {this.state.valueMaxb ? '直接显示' : '点击显示'}
                        //   </span>
                        // </div>
                        <RadioGroup>
                          <Radio value="1">直接显示</Radio>
                          <Radio value="2">点击显示</Radio>
                        </RadioGroup>
                      )}
                    </FormItem>
                    {/* <div style={{ marginBottom: 24, marginTop: 6 }}>
                      <span
                        style={{ marginRight: 10, color: '#c8c8c8', fontFamily: 'FZLTHJW--GB1' }}
                      >
                        显示状态
                      </span>
                      {getFieldDecorator('ckShow', {
                        initialValue: this.state.valueB,
                      })(
                        <RadioGroup>
                          <Radio value="1">直接显示</Radio>
                          <Radio value="2">点击显示</Radio>
                        </RadioGroup>
                      )}
                    </div> */}
                    <FormItem className="zdyswer" label="联想输入" {...FormItemLayont}>
                      {getFieldDecorator('isSimilar', {
                        initialValue: this.state.isSimilar,
                      })(
                        <div>
                          <Switch
                            className={styles.zdySwitch}
                            defaultChecked
                            onChange={this.rktbonChangec}
                            checked={this.state.valueMaxc}
                          />
                          <span
                            style={{
                              marginLeft: 10,
                              color: '#1D1D1D',
                              position: 'relative',
                              top: 2,
                            }}
                          >
                            {this.state.valueMaxc ? '关闭' : '开启'}
                          </span>
                        </div>
                        // <RadioGroup>
                        //   <Radio value="1">开启</Radio>
                        //   <Radio value="2">关闭</Radio>
                        // </RadioGroup>
                      )}
                    </FormItem>
                    {/* <div style={{ marginBottom: 24, marginTop: 6 }}>
                      <span
                        style={{ marginRight: 10, color: '#c8c8c8', fontFamily: 'FZLTHJW--GB1' }}
                      >
                        联想输入
                      </span>
                      {getFieldDecorator('ckShow', {
                        initialValue: this.state.valueB,
                      })(
                        <RadioGroup>
                          <Radio value="1">开启</Radio>
                          <Radio value="2">关闭</Radio>
                        </RadioGroup>
                      )}
                    </div> */}
                    <FormItem className="Uploadlg" label="客户默认头像" {...FormItemLayont}>
                      <Upload
                        name="avatar"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/res/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={this.handleChangeA}
                      >
                        <div className={styles.xzwj}>
                          {imageUrla ? (
                            <img style={{ width: 51, height: 51 }} src={imageUrla} alt="avatar" />
                          ) : (
                            uploadButton
                          )}
                          <img src={xzwj} alt="" />
                          {/* <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button> */}
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50
                      </p>
                    </FormItem>
                    <FormItem label="机器人客服头像" {...FormItemLayont}>
                      <Upload
                        name="customersFace"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/res/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={this.handleChangeB}
                      >
                        <div className={styles.xzwj}>
                          {imageUrlb ? (
                            <img
                              style={{ width: 51, height: 51 }}
                              src={imageUrlb}
                              alt="customersFace"
                            />
                          ) : (
                            uploadButtona
                          )}
                          <img src={xzwj} alt="" />
                          {/* <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button> */}
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50
                      </p>
                    </FormItem>
                    <FormItem label="机器人客服名称">
                      {getFieldDecorator('jqrkfName', {
                        initialValue: this.state.jqrkfName,
                      })(<Input />)}
                    </FormItem>
                    <FormItem label="默认窗口大小" {...FormItemLayont}>
                      <div className={styles.mrcdx}>
                        <img src={mrckSizea} />
                        <img style={{ marginLeft: 20 }} src={mrckSizeb} />
                      </div>
                      {getFieldDecorator('mrckSize', {
                        initialValue: this.state.ckdxSize,
                      })(
                        <RadioGroup className={styles.mrcdx}>
                          <Radio style={{ marginLeft: 20, marginTop: 10 }} value="1">
                            大窗口
                          </Radio>
                          <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                            小窗口
                          </Radio>
                        </RadioGroup>
                      )}
                    </FormItem>
                    {/* <FormItem label="热门问题" /> */}
                    <p style={{ color: '#eeeeee' }}>热门问题</p>
                    <div>
                      {this.state.commonProblemList.map((item, index) => {
                        // console.log(item)
                        return (
                          <div className={styles.flexMap} key={index}>
                            <Input
                              ref={
                                this.state.commonProblemList.length - 1 === index
                                  ? input => {
                                      this.inputRef = input;
                                    }
                                  : 'a'
                              }
                              onPressEnter={this.handleAdditem}
                              value={item.item}
                              onChange={e => this.zjrmwt(e, index)}
                              // style={{ width: 280 }}
                              // style={{ width: 190, marginRight: 10 }}
                              placeholder=""
                            />
                            {item.name === '' ? null : (
                              <span className={styles.qnmb}>
                                {/* <Icon
                                  onClick={() => this.handleSubmitAyd(index)}
                                  type="arrow-up"
                                  style={{ marginLeft: 5, width: 14, padding: '8px 0px 12px 0px' }}
                                />
                                <img
                                  style={{ marginLeft: 5, height: 14, marginTop: 8 }}
                                  src={ljx}
                                  onClick={() => this.handleSubmitAs(index)}
                                /> */}
                                {index === 0 ? null : (
                                  <span onClick={() => this.handleSubmitAyd(index)}>
                                    <img style={{ position: 'relative', top: 9 }} src={sy} />
                                  </span>
                                )}

                                <span style={{ marginLeft: 5 }}>
                                  <img
                                    src={laji}
                                    style={{ cursor: 'pointer', position: 'relative', top: 9 }}
                                    onClick={() => this.handleSubmitAs(index)}
                                  />
                                </span>
                              </span>
                            )}
                          </div>
                        );
                      })}
                      <span>
                        <img
                          style={{
                            cursor: 'pointer',
                            position: 'relative',
                            top: 2,
                            width: 240,
                            height: 70,
                          }}
                          onClick={this.handleAdditem}
                          src={xztime}
                        />
                      </span>
                      {/* <Button  onClick={this.handleAdditem}>新增热门问题</Button> */}
                    </div>
                    <FormItem className="antZdy" label="侧边栏信息展示">
                      <div style={{ width: 400 }}>
                        <Editor
                          content={this.state.content}
                          name="content"
                          id="content"
                          // height="300"
                          // width="50"
                          ref={r => (this.ueditor = r)}
                        />
                      </div>
                    </FormItem>
                  </Form>
                </div>
              </Col>
              <Col xl={10} lg={24}>
                <div
                  style={{ display: 'flex', justifyContent: 'flex-start' }}
                  className={styles.webSetRaght}
                >
                  <div className={styles.Rightjqr}>
                    <div style={{ height: 10, width: '100%' }} />
                    <Form className="zdyfroma" layout="horizontal">
                      <FormItem label=" 入口图标样式" {...FormItemLayont}>
                        <div className="zdyswer">
                          <Switch
                            className={styles.zdySwitch}
                            defaultChecked
                            onChange={this.rktbonChange}
                            checked={this.state.valueMax}
                          />
                          <span
                            style={{
                              marginLeft: 10,
                              color: '#1D1D1D',
                              position: 'relative',
                              top: 2,
                            }}
                          >
                            {this.state.valueMax ? '隐藏' : '显示'}
                          </span>
                        </div>
                      </FormItem>
                      <FormItem label=" 电脑端web" {...FormItemLayont}>
                        <div style={{ position: 'relative', bottom: 30 }}>
                          <div style={{ minHeight: 147, width: '100%', marginTop: 10 }}>
                            <div className={styles.kzrkysz}>
                              {this.state.zxkfList.map((item, index) => {
                                return (
                                  <Fragment key={index}>
                                    <div
                                      className={styles.kzrkys}
                                      onClick={() => this.djMapImg(index)}
                                    >
                                      <img
                                        className={styles.imgMap}
                                        style={{ margin: '0px 22px 0px 22px' }}
                                        src={item.name}
                                      />
                                    </div>
                                    {/* {item.icon === '1' && this.state.index ? <div className={styles.checkH}><Icon style={{ color: '#ffffff', fontSize: 4 }} type="check" /></div> : <div className={styles.checkHz}></div>} */}
                                    {item.icon === '1' && !imageUrld ? (
                                      <div className={styles.checkH}>
                                        <img src={gou} />
                                        {/* <Icon
                                          style={{ color: '#ffffff', fontSize: 4 }}
                                          type="check"
                                        /> */}
                                      </div>
                                    ) : (
                                      <div className={styles.checkH}>
                                        <img src={xa} />
                                        {/* <Icon
                                          style={{ color: '#ffffff', fontSize: 4 }}
                                          type="check"
                                        /> */}
                                      </div>
                                    )}
                                  </Fragment>
                                  // <img key={index} className={styles.imgMap} style={{ margin: '0px 22px 0px 22px' }} src={item.name} onClick={() => this.djMapImg(index)}></img>
                                );
                              })}
                              <div
                                style={{ position: 'relative', bottom: 15 }}
                                className={styles.xzwjts}
                              >
                                <Upload
                                  name="logoavatars"
                                  listType="picture"
                                  className="avatar-uploader"
                                  showUploadList={false}
                                  action="/cloud/res/upload"
                                  beforeUpload={this.beforeUpload}
                                  onChange={this.handleChangeD}
                                >
                                  <div onClick={this.qkimg}>
                                    {this.state.index !== null || imageUrld == null ? (
                                      // <Button size="small">选择文件</Button>
                                      <img src={xzwj} />
                                    ) : (
                                      <div className={styles.kzrkys}>
                                        <img
                                          style={{ width: 74, height: 74 }}
                                          src={imageUrld}
                                          alt="logoavatars"
                                        />
                                      </div>
                                    )}
                                    {imageUrld !== null ? (
                                      <div className={styles.checkHimg}>
                                        <img src={gou} />
                                        {/* <Icon
                                          style={{ color: '#ffffff', fontSize: 4 }}
                                          type="check"
                                        /> */}
                                      </div>
                                    ) : null}
                                  </div>
                                </Upload>
                              </div>
                            </div>
                          </div>
                        </div>
                      </FormItem>
                      <FormItem
                        style={{ position: 'relative', bottom: 30 }}
                        label="移动端H5"
                        {...FormItemLayont}
                      >
                        <div
                          style={{
                            minHeight: 200,
                            width: '100%',
                            position: 'relative',
                            bottom: 30,
                          }}
                        >
                          <div className={styles.kzrkysz}>
                            {this.state.ydkfList.map((item, index) => {
                              return (
                                <Fragment key={index}>
                                  <div
                                    className={styles.kzrkys}
                                    onClick={() => this.yddjMapImg(index)}
                                  >
                                    <img
                                      className={styles.imgMap}
                                      style={{ margin: '0px 22px 0px 22px' }}
                                      src={item.name}
                                    />
                                  </div>
                                  {item.icon === '1' && !imageUrle ? (
                                    <div className={styles.checkH}>
                                      {/* <Icon
                                        style={{ color: '#ffffff', fontSize: 4 }}
                                        type="check"
                                      /> */}
                                      <img src={gou} />
                                    </div>
                                  ) : (
                                    <div className={styles.checkH}>
                                      <img src={xa} />
                                    </div>
                                  )}
                                </Fragment>
                              );
                            })}
                            <div
                              style={{ position: 'relative', bottom: 15 }}
                              className={styles.xzwjts}
                            >
                              <Upload
                                name="logoavatard"
                                listType="picture"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="/cloud/res/upload"
                                beforeUpload={this.beforeUpload}
                                onChange={this.handleChangeE}
                              >
                                <div onClick={this.qkimgt}>
                                  {this.state.indextwo !== null || imageUrle == null ? (
                                    <img src={xzwj} />
                                  ) : (
                                    <div className={styles.kzrkys}>
                                      <img
                                        style={{ width: 74, height: 74 }}
                                        src={imageUrle}
                                        alt="logoavatard"
                                      />
                                    </div>
                                  )}
                                  {imageUrle !== null ? (
                                    <div className={styles.checkHimg}>
                                       <img src={gou} /> 
                                      {/* <Icon
                                        style={{ color: '#ffffff', fontSize: 4 }}
                                        type="check"
                                      /> */}
                                    </div>
                                  ) : null}
                                </div>
                              </Upload>
                            </div>
                          </div>
                        </div>
                      </FormItem>
                    </Form>

                    {/* <p
                      style={{
                        color: '#c8c8c8',
                        fontFamily: 'FZLTHJW--GB1',
                        fontSize: 14,
                        marginBottom: 0,
                        textAlign: 'left',
                        fontSize: 14,
                        position: 'relative',
                        top: 30,
                        right: 100,
                      }}
                    >
                      入口图标位置
                    </p>

                    <Row style={{ position: 'relative', top: 10 }}>
                      <p
                        style={{
                          color: '#c8c8c8',
                          fontFamily: 'FZLTHJW--GB1',
                          fontSize: 14,
                          marginBottom: 0,
                          textAlign: 'left',
                          fontSize: 14,
                        }}
                      >
                        电脑端web
                      </p>
                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 165, width: '100%', marginTop: 20 }}>
                          <div className={styles.mrcdx}>
                            <img src={imgycd} />
                            <img style={{ marginLeft: 20 }} src={imgycz} />
                          </div>
                          {getFieldDecorator('mrckdxweb', {
                            initialValue: this.state.mrckdxweb,
                          })(
                            <RadioGroup className={styles.mrcdx}>
                              <Radio style={{ marginLeft: 24, marginTop: 10 }} value="1">
                                右下角
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                                右侧中部
                              </Radio>
                            </RadioGroup>
                          )}
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <p
                        style={{
                          color: '#c8c8c8',
                          fontFamily: 'FZLTHJW--GB1',
                          fontSize: 14,
                          marginBottom: 0,
                          textAlign: 'left',
                          fontSize: 14,
                        }}
                      >
                        移动端H5
                      </p>
                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 200, width: '100%', marginTop: 20 }}>
                          <div className={styles.mrcdx}>
                            <img src={imgyddycd} />
                            <img style={{ marginLeft: 60 }} src={imgyddycz} />
                            <img style={{ marginLeft: 60 }} src={imgyddycx} />
                          </div>
                          {getFieldDecorator('mrckdxydd', {
                            initialValue: this.state.mrckdxydd,
                          })(
                            <RadioGroup onChange={this.bottomColor} className={styles.mrcdx}>
                              <Radio style={{ marginLeft: 8, marginTop: 10 }} value="1">
                                右下角
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                                右侧中部
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="3">
                                底部
                              </Radio>
                            </RadioGroup>
                          )}
                          {this.state.bottomStyle === 3 ? (
                            <div className={styles.buttonclass}>
                              <div>底部入口背景颜色</div>
                              <div>
                                {getFieldDecorator('ckcolortwo', {
                                  initialValue: this.state.colortwo,
                                })(
                                  <div className={styles.flexColor}>
                                    <div
                                      style={gbcolortwo}
                                      className={styles.colorzjtwo}
                                      onClick={this.handleClicktwo}
                                    />
                                    <span>{this.state.colortwo}</span>
                                    {this.state.displayColorPickertwo ? (
                                      <div style={popover}>
                                        <div style={cover} onClick={this.handleClosetwo} />
                                        <ChromePicker
                                          color={this.state.colortwo}
                                          onChangeComplete={this.handleChangeCompletetwo}
                                        />
                                      </div>
                                    ) : null}
                                  </div>
                                )}
                              </div>
                            </div>
                          ) : null}
                        </div>
                      </Col>
                    </Row> */}
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <div className={styles.webSetBotton} />
          <div style={{ margin: '24px 0px 24px 0px' }}>
            <div className={styles.flexcenm}>
              <div>
                {/*<img src={qxbuttom} style={{ marginRight: 50 }} />*/}
                <img onClick={this.baocun} src={qdbuttom} />
              </div>
            </div>
            {/* <Button style={{ marginRight: 10 }}>取消</Button>
            <Button onClick={this.baocun} type="primary">
              保存
            </Button> */}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(SiteAccess));
